<template>
    <div class="video_view">
        <Data_show_mode_cp
            :data_list="data_list">
            <template #left>
                <el-tabs v-model="active_name" @tab-click="on_tab_name">
                    <el-tab-pane label="全部视频" name="all"></el-tab-pane>
                </el-tabs>
            </template>
        </Data_show_mode_cp>
    </div>
</template>

<script>
import Data_show_mode_cp from '@/components/public_cp/data_show_mode'
export default {  //视频文件视图
    name: 'Video_view',
    components:{Data_show_mode_cp},
    data(){
        return{
            active_name: 'all', //标签页当前选择项
            data_list:[],
            cp_show:false, //当前组件是否显示
        };
    },
    // created(){
    //     this.get_data();
    // },
    activated(){ //页面显示就刷新一次
        this.cp_show = true;
        this.get_data();
    },
    deactivated(){
        this.cp_show = false;
    },
    watch:{
        '$store.state.update_data'(){ //监听全局更新的状态来决定是否更新文件列表
            if(this.cp_show){
                this.get_data();
            }
        },
    },
    methods:{
        on_tab_name(tab) { //标签被点击后触发
            console.log(tab);
        },
        get_data(){ //从后端获取全部文件列表
            this.$store.commit('set_loading',{
                state:true,
                msg:'正在获取文件列表',
            });
            this.$axios.json_post('/file/findList',{
                fileType:3,
            }).then(({data})=>{
                this.data_list = data;
                this.$store.commit('setAllFileNumber',data.length);
                this.$store.commit('setFileSize',null);
            }).finally(()=>{
                this.$store.commit('set_loading',{
                    state:false,
                });
            }).catch(msg=>{
                this.data_list = [];
                console.log(msg);
            });
        },
    },
}
</script>

<style scoped lang='scss'>
.video_view{
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
    line-height: 100%;
    /deep/.el-tabs__nav-wrap::after {
        background-color: #fafafa00;
    }
    /deep/.el-tabs__item {
        color: #828282;
    }
    /deep/.el-tabs__item.is-active {
        color: #409EFF;
    }
}
</style>
